<div class="btn-group pull-right">
   <button type="button" reset-key="panelState" class="btn btn-default btn-sm">Reset Panels</button>
   <button type="button" reset-key="portletState" class="btn btn-default btn-sm">Reset Porlets</button>
</div>
<h3>Portlets
   <small>Drag and collapse panels. Refresh and see how their state is automatically saved</small>
</h3>
<div ng-controller="portletsController" class="portlets-wrapper">
   <!-- START row-->
   <div class="row">
      <div id="portlet-1" portlet="portlet" class="col-lg-4">
         <!-- START panel-->
         <div id="panelPortlet1" class="panel panel-default">
            <div class="panel-heading portlet-handler">Default Panel
               <paneltool tool-collapse="tool-collapse"></paneltool>
            </div>
            <div collapse="panelPortlet1" class="panel-wrapper">
               <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
               </div>
               <div class="panel-footer">Panel Footer</div>
            </div>
         </div>
         <!-- END panel-->
         <!-- START panel-->
         <div id="panelPortlet2" class="panel panel-primary">
            <div class="panel-heading portlet-handler">Primary Panel
               <paneltool tool-collapse="tool-collapse"></paneltool>
            </div>
            <div collapse="panelPortlet2" class="panel-wrapper">
               <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
               </div>
               <div class="panel-footer">Panel Footer</div>
            </div>
         </div>
         <!-- END panel-->
         <!-- START panel-->
         <div id="panelPortlet3" class="panel panel-success">
            <div class="panel-heading portlet-handler">Success Panel</div>
            <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
         </div>
         <!-- END panel-->
         <!-- START widget-->
         <div id="panelPortlet4" class="panel widget">
            <div class="portlet-handler">
               <div class="row row-table row-flush">
                  <div class="col-xs-4 bg-danger text-center">
                     <em class="fa fa-music fa-2x"></em>
                  </div>
                  <div class="col-xs-8">
                     <div class="panel-body text-center">
                        <h4 class="mt0">100%</h4>
                        <p class="mb0 text-muted">VOLUME</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- END widget-->
         <!-- START widget-->
         <div id="panelPortlet5" class="panel widget">
            <div class="portlet-handler">
               <div class="row row-table row-flush">
                  <div class="col-xs-4 bg-inverse text-center">
                     <em class="fa fa-code-fork fa-2x"></em>
                  </div>
                  <div class="col-xs-8">
                     <div class="panel-body text-center">
                        <h4 class="mt0">150</h4>
                        <p class="mb0 text-muted">FORKS</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- END widget-->
      </div>
      <div id="portlet-2" portlet="portlet" class="col-lg-4">
         <!-- START panel-->
         <div id="panelPortlet6" class="panel panel-info">
            <div class="panel-heading portlet-handler">Info Panel</div>
            <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
         </div>
         <!-- END panel-->
         <!-- START panel-->
         <div id="panelPortlet7" class="panel panel-warning">
            <div class="panel-heading portlet-handler">Warning Panel</div>
            <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
         </div>
         <!-- END panel-->
         <!-- START panel-->
         <div id="panelPortlet8" class="panel panel-danger">
            <div class="panel-heading portlet-handler">Danger Panel</div>
            <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
         </div>
         <!-- END panel-->
         <!-- START widget-->
         <div id="panelPortlet9" class="panel widget">
            <div class="portlet-handler">
               <div class="row row-table row-flush">
                  <div class="col-xs-12">
                     <div class="panel-body text-center bg-purple">
                        <h4 class="mt0">10k</h4>
                        <p class="mb0 text-white">VISITORS</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- END widget-->
         <!-- START widget-->
         <div id="panelPortlet10" class="panel widget">
            <div class="portlet-handler">
               <div class="row row-table row-flush">
                  <div class="col-xs-12">
                     <div class="panel-body text-center bg-pink">
                        <h4 class="mt0">100%</h4>
                        <p class="mb0 text-white">VOLUME</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- END widget-->
      </div>
      <div id="portlet-3" portlet="portlet" class="col-lg-4">
         <!-- START panel-->
         <div id="panelPortlet11" class="panel panel-inverse">
            <div class="panel-heading portlet-handler">Inverse Panel</div>
            <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
         </div>
         <!-- END panel-->
         <!-- START panel-->
         <div id="panelPortlet12" class="panel panel-purple">
            <div class="panel-heading portlet-handler">Purple Panel</div>
            <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
         </div>
         <!-- END panel-->
         <!-- START panel-->
         <div id="panelPortlet13" class="panel panel-green">
            <div class="panel-heading portlet-handler">Green Panel</div>
            <div class="panel-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            </div>
            <div class="panel-footer">Panel Footer</div>
         </div>
         <!-- END panel-->
         <!-- START widget-->
         <div id="panelPortlet14" class="panel widget">
            <div class="portlet-handler">
               <div class="row row-table row-flush">
                  <div class="col-xs-12">
                     <div class="panel-body text-center bg-green">
                        <h4 class="mt0">150</h4>
                        <p class="mb0 text-white">FORKS</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- END widget-->
         <!-- START widget-->
         <div id="panelPortlet15" class="panel widget">
            <div class="portlet-handler">
               <div class="row row-table row-flush">
                  <div class="col-xs-12">
                     <div class="panel-body text-center bg-primary">
                        <h4 class="mt0">10</h4>
                        <p class="mb0 text-white">NEW MESSAGES</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- END widget-->
      </div>
   </div>
   <!-- END row-->
</div>